<template>
  <div>
    <note-templates :data="stringData" :list="directory">
      <template #note>
        <div id="note-item1">
          <title-card title="创建组件" />
          <p>
            在<b>\components</b>文件下创建组件文件，创建一个Clock组件如下所示
          </p>
          <pre-code :code="code1" language="JavaScript" />
        </div>
        <div id="note-item2">
          <title-card title="导出组件" />
          <p>在组件根目录下创建导出文件<b>index.js</b></p>
          <pre-code :code="code2" language="JavaScript" />
        </div>
        <div id="note-item3">
          <title-card title="本地测试" />
          <p>在<b>src\main.js</b>注册组件</p>
          <pre-code :code="code3" language="JavaScript" />
          <p>在<b>src\App.vue</b>里面去使用组件</p>
          <pre-code :code="code4" language="JavaScript" />
        </div>
        <div id="note-item4">
          <title-card title="配置vite.config.js文件" />
          <pre-code :code="code5" language="JavaScript" />
        </div>
        <div id="note-item5">
          <title-card title="运行打包命令" />
          <p>在终端使用<b>npm run build </b></p>
          <pre-code code="npm run build" language="bash" />
          在根目录下会生成打包后的文件
        </div>
        <div id="note-item6">
          <title-card title="上传到npm官网" />
          <ul>
            <li>
              <h3>1.配置package.json</h3>
              <p>首先我们在打包好的目录下，打开终端，然后执行npm init -y命令初始化package.json</p>
              <p>package.json是用来配置我们上传到npm仓库的的版本号等配的</p>
              <pre-code :code="code6" language="JavaScript" />
            </li>
            <li>
              <h3>2.注册npm账号</h3>
              <p>想要发布到npm仓库，就必须要有一个账号，先去npm官网注册一个账号，注意记住用户名、密码和邮箱，发布的时候可能会用到。</p>
            </li>
            <li>
              <h3>3.设置npm源</h3>
              <p>在国内很多小伙伴喜欢把本地的npm镜像源采用的是淘宝镜像源或者其它的，如果想要发布npm包，我们得吧我们得npm源切换为官方得源，命令如下:</p>
              <pre-code code="npm config set registry=https://registry.npmjs.org" language="bash" />
            </li>
            <li>
              <h3>4.登录到npm</h3>
              <p>在打包后的文件根目录打开终端，输入npm login登录到官网</p>
              <pre-code code="npm login" language="bash" />
            </li>
            <li>
              <h3>5.推送到npm仓库</h3>
              <p>输入npm publish就可以正式发布到npm仓库了</p>
              <pre-code code="npm publish" language="bash" />
            </li>
          </ul>
        </div>
      </template>
    </note-templates>
  </div>
</template>

<script setup name="NPM">
import NoteTemplates from '@/components/NoteTemplates/index.vue';
import TitleCard from '@/components/TitleCard/index.vue';
import { postArticleDetail } from '@/api/home.js';
import { onMounted, reactive, ref, toRefs } from 'vue';

const code1 = ref(`<template>
  <div class="clock">
    
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

<\/script>

<script lang="ts">
export default {
  name: "Clock",
};
<\/script>`);
const code2 = ref(`import Clock from "./Clock/index.vue";

// 按需引入
export { Clock };

const component = [Clock];

const VueClock = {
  install(App) {
    component.forEach((item) => {
      App.component(item.name, Clock);
    });
  },
};

export default VueClock;`);
const code3 = ref(`import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'
import VueClock from './components/index'

import './assets/main.css'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(VueClock)

app.mount('#app')`);
const code4 = ref(`<template>
  <Clock />
</template>`);
const code5 = ref(`import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
	build: {
    outDir: "vue-clock", //输出文件名称
    lib: {
      entry: path.resolve(__dirname, "./src/components/index.js"), //指定组件编译入口文件
      name: "vue-cloc",
      fileName: "vue-cloc",
    }, //库编译模式配置
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ["vue"],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: "Vue",
        },
      },
		}, // rollup打包配置
  },
});`);
const code6 = ref(`{
  "name": "vue-clock", // 上传后的名称
  "private": false, 
  "version": "1.0.0", // 版本号
  "description": "一个简单的时钟组件", // 版本描述
  "main": "vue-cloc.umd.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": ["Clock","clock","vue-clock"], // 可以通过哪些字段搜索出来
  "author": "zhouziwei",
  "license": "ISC"
}`)

const directory = ref([
  {
    name: '创建组件',
    id: 'note-item1',
  },
  {
    name: '导出组件',
    id: 'note-item2',
  },
  {
    name: '本地测试',
    id: 'note-item3',
  },
  {
    name: '配置vite.config.js文件',
    id: 'note-item4',
  },
  {
    name: '运行打包命令',
    id: 'note-item5',
  },
  {
    name: '上传到npm官网',
    id: 'note-item6',
  },
]);

const data = reactive({
  stringData: {},
});
const { stringData } = toRefs(data);
const getTitle = () => {
  postArticleDetail({
    route: 'NPM',
  }).then((res) => {
    stringData.value = res.data;
  });
};
onMounted(() => {
  getTitle();
});
</script>
